<template>
    <div class="manage-poems">
        <mobile-top-menu :data="menuData">
            <template v-slot:right>
                <div class="p-d-right f-r-r">
                    <div style="color: var(--font-color-blue);font-size: 16px;" @click="submitEdit">完成</div>
                </div>
            </template>
        </mobile-top-menu>
        <div class="m-p-content">
            <div class="mp-top f-c-c">
                <div class="mp-t-img" @click="changeCover">
                    <input ref="imgInputRef" type="file" accept="image/*" @change="onChange" hidden/>
                    <img :src="poemsCoverUrl" alt="" :style="previews.img">
                    <div v-html="previews.html"></div>
                    <div class="cover-icon" ><svg t="1681574772016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3417" width="28" height="28"><path d="M846.525959 288.822035 733.689055 288.822035l-48.477085-116.694769c-11.257391-27.103288-37.495986-44.61615-66.845431-44.61615L408.757614 127.511115c-29.348422 0-55.587016 17.512862-66.845431 44.61615l-48.475038 116.694769L180.598194 288.822035c-62.71946 0-113.7456 51.02614-113.7456 113.7456l0 378.463658c0 62.71946 51.02614 113.7456 113.7456 113.7456l665.927765 0c62.71946 0 113.7456-51.02614 113.7456-113.7456L960.27156 402.567635C960.27156 339.847152 909.24542 288.822035 846.525959 288.822035zM918.909523 781.030269c0 39.912012-32.471552 72.383564-72.383564 72.383564L180.598194 853.413833c-39.913035 0-72.383564-32.471552-72.383564-72.383564L108.21463 402.567635c0-39.912012 32.470529-72.383564 72.383564-72.383564l126.641305 0c8.357342 0 15.892969-5.02955 19.098987-12.748349l53.770648-129.443118c4.824889-11.614525 16.070001-19.120476 28.64848-19.120476l209.608925 0c12.57848 0 23.823592 7.504928 28.646434 19.1215l53.772694 129.443118c3.207042 7.716752 10.742668 12.747325 19.10001 12.747325l126.641305 0c39.912012 0 72.383564 32.471552 72.383564 72.383564L918.910547 781.030269z" fill="#272636" p-id="3418"></path><path d="M513.561565 349.83769c-115.843378 0-210.089879 94.245478-210.089879 210.089879s94.245478 210.089879 210.089879 210.089879 210.089879-94.245478 210.089879-210.089879S629.405967 349.83769 513.561565 349.83769zM513.561565 728.655412c-93.036953 0-168.727843-75.691913-168.727843-168.727843s75.69089-168.727843 168.727843-168.727843c93.03593 0 168.727843 75.691913 168.727843 168.727843S606.598518 728.655412 513.561565 728.655412z" fill="#272636" p-id="3419"></path><path d="M456.241069 644.973524c-28.319999-19.131733-45.227064-50.924833-45.227064-85.046978 0-11.42112-9.258874-20.681018-20.681018-20.681018s-20.681018 9.259898-20.681018 20.681018c0 47.879474 23.713075 92.484368 63.433728 119.319549 3.549849 2.397606 7.574512 3.546779 11.559267 3.546779 6.638187 0 13.159718-3.190669 17.154705-9.106402C468.193285 664.222937 465.704604 651.368164 456.241069 644.973524z" fill="#272636" p-id="3420"></path><path d="M263.747963 381.095601l-86.860277 0c-11.422144 0-20.681018 9.258874-20.681018 20.681018s9.258874 20.681018 20.681018 20.681018l86.860277 0c11.422144 0 20.681018-9.258874 20.681018-20.681018S275.170107 381.095601 263.747963 381.095601z" fill="#272636" p-id="3421"></path></svg></div>
                </div>
            </div>
            <div class="mp-bottom">    
                <!-- <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload> -->
                <div class="poems-name">
                    <el-input v-model="poemsName" placeholder="诗单名称"></el-input>
                </div>
                <div class="synopsis">
                    <textarea v-model="synopsis" name="" id="" placeholder="简介"></textarea>
                </div>
                <div class="private">
                    <el-switch v-model="isPrivate" class="ml-2" 
                    style="--el-switch-on-color: var(--switch-color-active); --el-switch-off-color: var(--switch-color)"
                    inactive-text="设置为私密诗单"/>
                </div>
            </div>
        </div>
        <el-dialog v-model="isShowPopup" title="图片裁剪" width="100%" :fullscreen="true"
            :before-close=" () => { isShowPopup = false;}">
            <div style="width: 100%; height: 50vh">
                <vueCropper
                ref="cropperRef"
                :img="options.img"
                :info="true"
                :infoTrue="options.infoTrue"
                :auto-crop="options.autoCrop"
                :fixed-box="options.fixedBox"
                :fixedNumber="options.fixedNumber"
                :fixed="options.fixed"
                :centerBox="options.centerBox"
                :full="options.full"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                @realTime="realTime"></vueCropper>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowPopup = false">取消</el-button>
                    <el-button type="primary" @click="finish"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <error-alert :message="errorMessage" ref="showErrorAlert"></error-alert>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue"
import poemsDetailStore from "../poems-detail.store"
import { IOptionsModel } from "../poems-detail.model"
import { useRoute, useRouter } from 'vue-router'
import { getAssetsFile } from "@/utils/util"
import VueCropper from "vue-cropper/src/vue-cropper.vue"

const route = useRoute()
const router = useRouter()
const menuData = computed(() => {
    return {
        leftMsg: '返回',
        centerMsg: '编辑诗单',
    }
})

// 获取诗单信息
let poemsCoverUrl = ref<string>('')
let poemsName = ref<string>('')
let synopsis = ref<string>('')
let isPrivate = ref<boolean>(false)
let imageUrl = ref<string>('')
const poemsId = route.params.poemsId
const poemsDetailSe = poemsDetailStore()
let poemsList = ref<any>({})
const getPoemsByPlId = () => {
    poemsDetailSe.searchPoemsListDetailByPlId({ pl_id: poemsId }).then((res: any) => {
        if(res.status == 'success') {
            poemsList.value = res.results.poemsList[0]
            poemsCoverUrl.value = (poemsList.value.pl_cover &&  poemsList.value.pl_cover != '无') ? poemsList.value.pl_cover : getAssetsFile('cover/poems/default-poems.png')
            poemsName.value = poemsList.value.pl_name
            synopsis.value = poemsList.value.pl_synopsis
            isPrivate.value = poemsList.value.make_private == 1 ? true : false
        }
    })
}
onMounted(() => {
    getPoemsByPlId()
})

// 编辑图片
let isShowPopup = ref<boolean>(false)
let imgInputRef = ref<any>(null)
// 点击头像
const changeCover = () => {
    imgInputRef.value.click()
}
// 选择图片
let fileItem = reactive<any>({})
const options = reactive({
    img: '', // 需要剪裁的图片
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: 100, // 默认生成截图框的宽度
    autoCropHeight: 100, // 默认生成截图框的长度
    fixedBox: true, // 是否固定截图框的大小 不允许改变
    info: true, // 裁剪框的大小信息
    outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
    outputType: 'png', // 裁剪生成图片的格式
    canScale: true, // 图片是否允许滚轮缩放
    fixed: true, // 是否开启截图框宽高固定比例
    fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
    full: true, // 是否输出原图比例的截图
    canMoveBox: false, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: true, // 截图框是否被限制在图片里面
    infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    // accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon'
})
const onChange = (e: any) => {
    if(!e.target.files[0]) return 
    const file = e.target.files[0];
    fileItem = file
    const URL = window.URL || window.webkitURL
    options.img = URL.createObjectURL(file)
    isShowPopup.value = true
}
// 裁剪之后的数据
const cropperRef: any = ref({})
const previews: any = ref({})
const realTime = (data: any) => {
    previews.value = data
}

// 上传图片（点击保存按钮）
let cropperData = ref<any>() // 用于存储裁剪后的图片
const finish = () => {
    cropperRef.value.getCropBlob((data: any) => {
        cropperData.value = data
    })
    isShowPopup.value = false;
    poemsCoverUrl.value = previews.value.url
}

// 点击完成
let errorMessage = ref<string>('')
let showErrorAlert = ref<any>(null)
const submitEdit = () => {
    const poemsListInfo = {
        type: 'cover/poems-list',
        poemsName: poemsName.value,
        synopsis: synopsis.value,
        isPrivate: isPrivate.value,
        poemsId: poemsId
    }
    let formData = new FormData()
    if(cropperData.value) {
        // 如果用户有更改图片，就将blob转为formData
        formData.append("file", cropperData.value, new Date().getTime() + ".jpg")
    }
    poemsDetailSe.editPoemsListInfo(formData, poemsListInfo).then((res: any) => {
        if(res.status == 'success') {
            router.back()
            errorMessage.value = '编辑成功'
            showErrorAlert.value.showErrorAlert()
            return
        } else {
            errorMessage.value = '编辑失败'
            showErrorAlert.value.showErrorAlert()
            return
        }
    })
}
</script>

<style lang="less" scoped>
.manage-poems {
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    background-color: var(--bg-color);
    overflow-y: auto;
    .m-p-content {
        .mp-top {
            height: 10rem;
            border-bottom: 1px solid var(--border-color-gray);
            .mp-t-img {
                width: 6rem;
                height: 6rem;
                // padding: 0.3rem;
                // border: 1px solid var(--border-color-gray1);
                position: relative;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
                .cover-icon {
                    position: absolute;
                    bottom: 0.5rem;
                    right: 0.5rem;
                    path {
                        fill: var(--font-color-gray);
                    }
                }
            }
        }
        .mp-bottom {
            margin-top: 1rem;
            padding: 0 1rem;
            .poems-name {
                margin: 1rem 0;
                :deep(.el-input__wrapper) {
                    box-shadow: 0 0 0 1px var(--border-color-gray) inset;
                    border-radius: 4px;
                    .el-input__inner {
                        color: var(--border-color-black);   
                    }
                }
            }
            .synopsis {
                width: 100%;
                height: 5rem;
                margin-bottom: 1rem;
                textarea {
                    background: var(--bg-color);
                    border-radius: 4px;
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    box-shadow: 0 0 0 1px var(--border-color-gray) inset;
                    border: none;
                    &::placeholder {
                        color: var(--font-color-gray);
                    }
                }
            }
            .private {
                :deep(.el-switch__label) {
                    span {
                        color: var(--font-color-gray);
                    }
                }
            }
        }
    }
    :deep(.manage-poems-popup) {
        z-index: 2015 !important;
    }
    :deep(.van-popup) {
        z-index: 2016 !important;
        width: 100% !important;
        margin: 0 !important;
        max-width: unset;
    }
}

.box {
    background-color: #000;
    height: 100%;
    color: #fff;
}

.imgbox {
    max-width: 100%;
    display: block;
}

.tool {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;

    .cel,
    .cfm {
        width: 90px;
        height: 90px;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

:deep(.el-overlay) {
    z-index: 9999 !important;
    // background-color: black !important;
    // .el-dialog__header {
    //     background-color: black !important;
    //     margin-right: 0 !important;
    //     .el-dialog__title {
    //         color: #fff;
    //     }
    //     path {
    //         fill: #fff;
    //     }
    // }
    .el-dialog__body, .el-dialog__footer {
        // background-color: black !important;
    }
}
</style>